<!--@description: 播放页面
	@author: 刘钰
    @update: 刘钰(2019-08-05 11:11) -->
<template>
    <div class="index" id="play">
        <div id="web_bg" :style="webBg"></div>

        <div class="m-close" v-if="isAppEnv" @click="closePage">
            <img src="./../assets/close3.png">
        </div>

        <div class="head clear" @click="shiftLogin">
            <div class="img fl" v-show="!message.icon || !isLogined">
                <img :src="defaultAva">
            </div>
            <div class="img fl" v-show="message.icon && isLogined">
                <img :src="message.icon">
            </div>
            <span class="name fl" v-show="isLogined">{{userName}}</span>
            <span class="name fl" v-show="!isLogined">请登录</span>
            <span class="title fl">&nbsp;，欢迎进入海尔空调新品培训会</span>
        </div>

        <div class="m-video" @click="needLoginForWatchLive">
            <div :class="{'z-top': showedTopViedo && !needFakeFullScreen, 'z-full': needFakeFullScreen}"
                :style="needFakeFullScreen ? fullHeightStyle : {}"
                class="video"
                @touchstart="handleClickVideo"
                >
                <div class="shade" v-if="!isLogined"></div>

                <div class="disern-hint" @touchstart.stop="readDisernHint" v-show="showedDisernHint">
                    <img src="./../assets/disern-hint.png">
                </div>

                <div :class="{'z-hide': needHideVideo}"
                    class="prism-player"
                    ref="video"
                    id="player-con"></div>
                
                <div class="video-info" :class="videoIsFullScreen ? 'z-fs' : ''" v-if="annoInfo!=null">
                    <img class="video-logo" :src="annoInfo.logoUrl">
                    <span class="video-view" v-if="viewsNumber!=''">{{ viewsNumber }}人在线</span>
                </div>

                <div v-show="showedVideoControlBar" class="video-controller">
                    <div class="video-btn"
                        :class="{'z-on': videoIsFullScreen}"
                        @touchstart.stop.prevent="shiftFullVideo"
                        @click.stop.prevent>
                        <img src="./../assets/to-full-screen.png">
                        <img src="./../assets/to-small-screen.png">
                    </div>

                    <div class="video-btn"
                        :class="{'z-on': videoIsPlaying}"
                        @touchstart.stop.prevent="shiftVideoPlay"
                        @click.stop.prevent>
                        <img src="./../assets/play.png">
                        <img src="./../assets/pause.png">
                    </div>
                </div>

                <div class="close-btn" @click="closePage" v-if="isAppEnv" v-show="showedTopViedo &&  !needFakeFullScreen">
                    <img src="./../assets/close2.png">
                </div>

                <div class="discern-info"  
                    onselectstart="return false" 
                    id="identifyInfo"
                    v-show="disernInfo.type != 0" 
                    v-if="needShowDiscernBox">

                    <div class="discern-box">
                        <div class="img-box clear" >
                            <img :src="screenshot"
                                class="face-show"
                                ref='faceImg'
                                :class="{'z-active': disernInfo.type == 2}">
                            
                            <!-- 扫描中 -->
                            <img src="../assets/border-f.png"
                                v-show="disernInfo.type == 1"
                                class="face-border2">
                            
                            <!-- 扫描结束 人脸 -->
                            <div class="face-border z-on"
                                :style="faceBorderStyle"
                                v-show="disernInfo.type == 2 && disernInfo.disernType == 1">
                                <img src="../assets/border-corner.png">
                                <img src="../assets/border-corner.png">
                                <img src="../assets/border-corner.png">
                                <img src="../assets/border-corner.png">
                            </div>

                            <!-- 扫描结束 物品 -->
                            <div class="face-border"
                                :style="item"
                                :key="index"
                                :class="{'z-on': index==disernInfo.currGoodIndex}"
                                @touchstart.stop.prevent="selectDisernGoodIndex(index)"
                                @click.stop.prevent
                                v-for="(item, index) in goodBorderStyleArr"
                                v-show="disernInfo.type == 2 && disernInfo.disernType == 2">
                                <img src="../assets/border-corner.png">
                                <img src="../assets/border-corner.png">
                                <img src="../assets/border-corner.png">
                                <img src="../assets/border-corner.png">
                           </div>
                        </div>

                        <div class="text-wrap">
                            <div class="text-box" v-if="disernInfo.type == 2">
                                <div v-if="disernInfo.disernType == 1">
                                    <div class="p3">
                                        <img v-if="disernInfo.face.info.imgUrl == ''" src="../assets/avatar.png" />
                                        <img v-else :src="disernInfo.face.info.imgUrl" />

                                        <div>
                                            <img src="../assets/bg-face.png">
                                            <span>扫验成功</span>
                                        </div>
                                    </div>

                                    <p class="p4">
                                        <span>姓名：{{disernInfo.face.info.personName}}</span>
                                        <span>国籍：{{disernInfo.face.info.partisan}}</span>
                                    </p>

                                    <p class="p4">
                                        <span>简介：{{disernInfo.face.info.description}}</span>
                                    </p>

                                    <a :href="disernInfo.face.info.linkUrl">了解更多 >></a>
                                </div>

                                <div v-else-if="disernInfo.disernType == 2">
                                    <div class="p3">
                                        <img v-if="currDisernGood.info.imgUrl == ''" src="../assets/avatar.png" />
                                        <img v-else :src="currDisernGood.info.imgUrl" />

                                        <div>
                                            <img src="../assets/bg-face.png">
                                            <span>扫验成功</span>
                                        </div>
                                    </div>

                                    <p class="p4">
                                        <span>名称：{{currDisernGood.info.goodsName}}</span>
                                        <span>品牌：{{currDisernGood.info.brand}}</span>
                                        <span>型号：{{currDisernGood.info.model}}</span>
                                    </p>

                                    <p class="p4">简介：<span>{{currDisernGood.info.description}}</span></p>

                                    <a :href="currDisernGood.info.linkUrl">了解更多 >></a>
                                </div>
                            </div>

                            <div class="text-box" v-show="disernInfo.type == 1">
                                <p class="p1">AI小布正在识别画面中…</p>
                                <p class="p2">点击屏幕停止识别</p>
                            </div>

                            <div class="text-box" v-show="disernInfo.type == 3">
                                <p class="p1">未识别到信息</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间标题区域 -->
        <div class="m-box" v-show="false">
            <div class="title">
                <span class="z-stress">链群合约 生态品牌</span>
                <span>海尔920：第三届人单合一模式国际论坛</span>
            </div>
        </div>

        <div class="TVBox" v-show="showedTVBox">
            <div :class="{'z-dim': tvboxIsDim}">
                <img @click="showedTVBox = false" src="./../assets/close.png" class="i-close">
            <img @click="showTvbox" src="./../assets/watchTV.png" class="tv-img animated swing">
            </div>
        </div>

        <div class="TVintroduce" @click.self="clickTVBOx = !clickTVBOx" v-show="clickTVBOx">
            <img src="./../assets/introduce.png">
        </div>

        <div class="content" :style="fullHeightStyle" v-show="!needFakeFullScreen">
            <div class="chat">
                <div class="nav" :class="{'z-3': isAppEnv}">
                    <ul>
                        <li :class="{'active':show}" @click="changeStyle(1)">大家说</li>
                        <li :class="{'active':!show}" @click="changeStyle(2)">了解我</li>
                        <li class="z-stress" @click="toShare" v-show="isAppEnv">
                            <img src="./../assets/share2.png">
                            分享
                        </li>
                    </ul>
                </div>

                <div class="chatWindow" v-show="show">
                    <div class="sys clear a-fade-in-right" v-show="showSysMessage">
                        <div class="system fl">
                            <span>&nbsp;系统消息：</span>
                            <span>{{message2}}</span>加入房间
                            <!-- <span>&nbsp;系统消息：</span><span>{{userName}}</span> 加入房间 -->
                            <img src="./../assets/xiaolian.png" v-show="message1">
                        </div>
                    </div>

                    <div class="show" id="shows"
                        :style="fullHeightStyle"
                        :class="{'unfold': openEmoji || openPhoto}"
                        ref="ol"
                        @click="openEmoji=false;openPhoto=false">
                        
                        <ul id="ul" ref="ul" @click="openEmoji=false;openPhoto=false">
                            <template v-for="(item, index) in chatList">
                                <!-- 对方消息: 文字 -->
                                <li v-if="(item.msgType==1 || item.msgType==2) && !item.isSelf"
                                    v-show="!item.isDeleted"
                                    class="clear"
                                    :key = "index">
                                    <div class="ava fl"><img :src="item.avatar"></div>
                                    <div class="label fl">
                                        <div class="name" :class="{'s-office': item.msgType == 2}">
                                            {{item.nickName}}
                                            <span v-show="item.msgType == 2">官方</span>
                                        </div>
                                        <div class="cont left">
                                            <p class="message" style="word-break:break-all;" v-html="item.msg"></p>
                                        </div>
                                    </div>
                                </li>

                                <!-- 自已发送消息: 文字 -->
                                <li class="self"
                                    v-show="!item.isDeleted"
                                    :key = "index"
                                    v-else-if="(item.msgType==1 || item.msgType==2) && item.isSelf">
                                    <div class="ava">
                                        <img :src="item.avatar">
                                    </div>
                                    <div class="label">
                                        <div class="name" :class="{'s-office': item.msgType == 2}" style="text-align: right;">
                                            {{ item.nickName }}
                                            <span v-show="item.msgType == 2">官方</span>
                                        </div>
                                        <div class="cont right">
                                            <p class="message" style="word-break:break-all;" v-html="item.msg"></p>
                                        </div>
                                    </div>
                                </li>

                                <!-- 自已发送消息: 图片 -->
                                <li class="self"
                                    v-show="!item.isDeleted"
                                    :key = "index"
                                    v-else-if="item.msgType==4 && item.isSelf">
                                    <div class="ava">
                                        <img :src="item.avatar">
                                    </div>
                                    <div class="label">
                                        <div class="name" style="text-align: right;">
                                            {{ item.nickName }}
                                        </div>

                                        <img :src="item.img" @load="chatBoxScrollToBottom(true)" class="upload-pic">
                                    </div>
                                </li>

                                <!-- 对方消息: 图片 -->
                                <li v-if="item.msgType==4 && !item.isSelf"
                                    class="clear"
                                    v-show="!item.isDeleted"
                                    :key = "index">
                                    <div class="ava fl"><img :src="item.avatar"></div>
                                    <div class="label fl">
                                        <div class="name">
                                            {{item.nickName}}
                                        </div>

                                        <img :src="item.img" @load="chatBoxScrollToBottom(false)" class="upload-pic">
                                    </div>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>

                <div class="aboutMe" :style="fullHeightStyle" v-show="!show" ref="adoutMeRef">
                    <div class="m-info" v-if="annoInfo!=null">
                        <div class="box1">
                            <img src="./../assets/al-live.png">
                        </div>
                        <p class="h2">{{annoInfo.mainPretitle}}</p>
                        <p class="h3">{{annoInfo.subPretitle}}</p>
                        <div class="tag-list">
                            <div v-for="(item,index) in annoInfo.actTags"
                                :key="index"
                            >{{item}}</div>
                        </div>
                        <ul class="ul1">
                            <li :style="li1">
                                <p>活动时间：{{annoInfo.actDatetime}}</p>
                            </li>
                            <li :style="li2">
                                <p>活动地址：{{annoInfo.actPlace}}</p>
                                <!-- <p class="h2" style="margin-top: 6px;">{{annoInfo.actPlace}}</p> -->
                                <p class="z-weaken">{{annoInfo.actLine}}</p>
                            </li>
                            <li :style="li3">
                                <p>主办方：{{annoInfo.companyName}}</p>
                            </li>
                        </ul>
                    </div>

                    <!-- <div class="m-info">
                        <div class="box3">
                            <div class="boxin">
                                <div style="display: flex">
                                    <div class="box3-l">Haier</div>
                                    <div class="box3-c">
                                        <p class="h2">青岛海尔文化产业中心</p>
                                        <li>
                                            <p class="h3" style="padding-right: 3px;">会议 8</p>
                                            <p class="h3">| 已关注 635</p>
                                        </li>
                                    </div>
                                </div>
                                <div class="box3-r">
                                    关注企业
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <div class="m-info">
                        <div :class="{'z-unfold': unfold}"
                            class="activeBox"
                            ref="activ">

                            <div class="btn">
                                <span :class="{active: isChoose1}" @click="isActive(1)">活动详情</span>
                                <span :class="{active: isChoose2}" @click="isActive(2)">活动流程</span>
                                <span :class="{active: isChoose3}" @click="isActive(3)">活动嘉宾</span>
                            </div>

                            <div class="detail" v-show="isChoose1" v-if="annoXqInfo[0]">
                                <!-- 轮播图 -->
                                <div class="swiper">
                                    <swiper
                                        :options="swiperOption"
                                        class="swiper-wrap"
                                        ref="mySwiper"
                                        v-if="annoXqInfo[0].picList.length !== 0"
                                        >
                                        <swiper-slide
                                            v-for="(img,index) in annoXqInfo[0].picList"
                                            :key="index"
                                        >
                                            <img :src="img.picUrl">
                                        </swiper-slide>
                                        <!-- 常见的小圆点 -->
                                        <p
                                            class="swiper-pagination"
                                            v-for="(img,index) in annoXqInfo[0].picList"
                                            :key="index"
                                            slot="pagination"
                                        ></p>
                                    </swiper>
                                </div>

                                <p>{{annoXqInfo[0].content}}</p>
                            </div>

                            <div class="process" v-show="isChoose2">
                                <ul v-if="annoLcInfo">
                                    <li v-for="(lc,index) in annoLcInfo" :key="index">
                                        <span>{{lc.startTime}}～{{lc.endTime}}</span>
                                        <span>{{lc.content}}</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="honer" v-show="isChoose3">
                                <ul class="clear" v-if="annoJbInfo">
                                    <li v-for="(jb,index) in annoJbInfo" :key="index">
                                        <img :src="jb.picUrl" class="avatar">
                                        <div class="card">
                                            <h3>{{jb.jbName}}</h3>
                                            <h4>{{jb.jbDescription}}</h4>
                                        </div>
                                    </li>
                                    <!-- <li>
                                        <img src="./../assets/avatar.png" class="avatar">
                                        <div class="card">
                                            <h3>张瑞敏</h3>
                                            <h4>海尔集团首席执行官</h4>
                                        </div>
                                    </li>-->
                                </ul>
                            </div>    
                        </div>

                        <div class="fold" v-show="!unfold" @click="closeMore">
                            <img src="./../assets/shouqitianchong.png">
                            收起
                        </div>

                        <p class="showMore" v-show="unfold" @click="openMore">向下展开
                            <img src="./../assets/gengduo-12.png">
                        </p>  
                    </div>

                    <div class="m-info" v-show="isAppEnv">
                        <div class="recommen">
                            <h3>相关推荐</h3>

                            <div
                                class="otherVedio"
                                v-for="(item,index) in liveList"
                                :key="index"
                                @click="handleClickRecommend(item.id, item.type, item.title, item.picUrl)"
                                >
                                <img :src="item.picUrl" class="banner">
                                <div class="font">
                                    <div class="title">{{item.title}}</div>
                                    <div class="state">
                                        <span class="state-sign">
                                            回放
                                            <span class="sign1 span"></span>
                                            <span class="sign2 span"></span>
                                            <span class="sign3 span"></span>
                                        </span>
                                        <span class="watch">观看</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="m-fm" ref="chatInputView" v-show="show && !needFakeFullScreen">
            <div class="shade" v-show="!isLogined" @click="checkLogin"></div>
            
            <div class="send clear" :class="{'z-focus': cont!=''}">
                <div class="text fl" :style="textBg">
                    <input
                        type="text"
                        id="inputId"
                        v-model="cont"
                        class="fl"
                        placeholder="快来吐槽呗～"
                        @keyup.enter="send"
                        @blur="handleInputBlur"
                        @focus="handleInputFocus">
                </div>
                <div @click="send" class="btn fr a-scale-in">发送</div>
                <img src="./../assets/more.png" class="more fr" @click="unfoldPhoto">
                <img src="./../assets/xiaomi.png"
                    class="mode fr"
                    @click="unfoldEmoji">
            </div>
            
            <div class="emoji" v-show="openEmoji">
                <ul v-show="openEmoji" class="clear">
                    <li v-for="item in picArr" :key="item.id">
                        <img :src="item.url" @click="choose(item.id)">
                    </li>
                </ul>
            </div>

            <div class="pic" v-show="openPhoto">
                <img
                    src="./../assets/pic.png"
                   
                    class="upload-pic"
                    @click="startUploadImg" >
                <span>图片</span>
                <input type="file" accept="image/*" name="asd" id="file" @change="uploadImg">
            </div>
        </div>

        <div class="dialog" v-show="showLogin" @click.self="closeDialog()" ref="dialog">
            <form class="form">
                <div class="form__cover"></div>
                <div class="form__loader">
                    <div class="spinner active">
                        <svg class="spinner__circular" viewBox="25 25 50 50">
                            <circle
                                class="spinner__path"
                                cx="50"
                                cy="50"
                                r="20"
                                fill="none"
                                stroke-width="4"
                                stroke-miterlimit="10"
                            ></circle>
                        </svg>
                    </div>
                </div>
                <div class="form__content">
                    <h1>
                        <img src="./../assets/login-title.png">
                    </h1>
                    <div class="styled-input" style="width:100%">
                        <input
                            type="text"
                            class="styled-input__input"
                            placeholder="手机号"
                            v-model="phoneNum"
                            @blur="hackBlurTop">
                        <div class="styled-input__circle"></div>
                    </div>
                    <div class="clear">
                        <div class="styled-input fl" style="width:60%">
                            <input ref="codeInput"
                                type="text"
                                class="styled-input__input"
                                placeholder="验证码"
                                @blur="hackBlurTop"
                                v-model="sysCode">
                            <div class="styled-input__circle"></div>
                        </div>

                        <div class="styled-input fr" @click="getCode" style="width:35%;">
                            <div class="code">{{ sendCodeText }}</div>
                        </div>
                    </div>
                    <!-- 密码 -->
                    <div class="styled-input">
						<input 
                            autocomplete="off"
							type="password" 
							class="styled-input__input" 
							placeholder="直播密码"
                            @blur="hackBlurTop"
							v-model="password">
						<div class="styled-input__circle"></div>
					</div>

                    <button type="button" class="styled-button" @click="submit">
                        <span class="styled-button__real-text-holder">
                            <span class="styled-button__real-text">Submit</span>
                            <span class="styled-button__moving-block face">
                                <span class="styled-button__text-holder">
                                    <span class="styled-button__text">登录</span>
                                </span>
                            </span>
                            <span class="styled-button__moving-block back">
                                <span class="styled-button__text-holder">
                                    <span class="styled-button__text">Submit</span>
                                </span>
                            </span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import banner from "./../assets/banner.png";
import toFullScreenImg from "./../assets/to-full-screen.png";
import toSmallScreenImg from "./../assets/to-small-screen.png";
import video from "./../assets/bb.mp4";
// import screen from "./../assets/introduce.png";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import message from '../modules/message';
import html2canvas from 'html2canvas';
import getQueryPara from 'dai-js/modules/getQueryPara';
require("swiper/dist/css/swiper.css");

let OSS = require('ali-oss');
var player;

// 伪全屏组件
var fakeFullScreenCpt = Aliplayer.Component({
    init(){
        this.$html = document.createElement('div');
        this.$html.classList.add('u-fake-full-screen');
        this.$html.style.display = 'none';

        let iconFull = document.createElement('i');
        iconFull.style.backgroundImage = 'url("' + toFullScreenImg + '")';
        iconFull.classList.add('i-full-screen');

        let iconSmall = document.createElement('i');
        iconSmall.style.backgroundImage = 'url("' + toSmallScreenImg + '")';
        iconSmall.classList.add('i-small-screen');

        this.$html.appendChild(iconSmall);
        this.$html.appendChild(iconFull);
    },

    createEl(el){
        el.appendChild(this.$html);
    },

    play(player, e){
    },

    pause(player, e){
    }
});

export default {
    name:"index",

    data(){
        const that = this;
        return{
            waggle:true,
            player:"",//播放器初始化

            // 人脸识别模块
            screenshot:"",//截图信息
            backInfo:"",//oss上传返回信息
            
            disernInfo:{
                type: 0, //识别状态 0未开始 1进行中 2成功 3失败

                disernType: 1, // 1人脸 2物品

                srcImgWidth: 300,
                srcImgHeight: 300,

                face: {
                    info: {
                        imgUrl: '',
                        personName: '**',
                        partisan: '**',
                        description: '**',
                    },

                    Rect: {
                        Top: 0,
                        Left: 0,
                        width: 0,
                        Height: 0,
                    }
                },

                // 多个商品情况下，当前显示
                currGoodIndex: 0,
                good: [
                    // {
                    //     info: {
                    //         imgUrl: '',
                    //         goodsName: '**',
                    //         brand: '**',
                    //         model: '**',
                    //         description: '**',
                    //     },

                    //     rect: {
                    //         top: 0,
                    //         left: 0,
                    //         width: 200,
                    //         height: 100,
                    //     }
                    // }, {
                    //     info: {
                    //         imgUrl: '',
                    //         goodsName: '****',
                    //         brand: '****',
                    //         model: '****',
                    //         description: '****',
                    //     },

                    //     rect: {
                    //         top: 50,
                    //         left: 50,
                    //         width: 80,
                    //         height: 100,
                    //     }
                    // }
                ]
            },

            onLink:false,

            //播放器设置
            playState:true,//默认直播
            fullDelete:true,

            defaultAva: require("./../assets/defaultPic.png"),
            defaultOfficialAva: require("./../assets/avatar.png"),
            //背景图片
            webBg:{
                backgroundImage:"url(" + require("../assets/bg.png") + ")" ,
            },
            contentBg:{
                backgroundImage:"url(" + require("../assets/bg-font.png") + ")" ,
            },
            textBg:{
                backgroundImage:"url(" + require("../assets/talk.png") + ")" ,
            },
            li1:{
                backgroundImage:"url(" + require("../assets/shijian.png") + ")" ,
            },
            li2:{
                backgroundImage:"url(" + require("../assets/zhiyuandidian7.png") + ")" ,
            },
            li3:{
                backgroundImage:"url(" + require("../assets/gongsi.png") + ")" ,
            },
            fontFace:{
                backgroundImage:"url(" + require("../assets/bg-face.png") + ")" ,
            },
            videoBg:{
                backgroundImage:"url(" + require("../assets/banner.png") + ")" ,
            },

            //分割线
            userName: window.localStorage.user ? JSON.parse(window.localStorage.user).username : "",
            img: window.localStorage.user ? JSON.parse(window.localStorage.user).img : this.defaultAva,
            position: "20%",
            show:true,
            cont:"",    //输入内容
            wst:null,   //定义websockt
            client:{},
            value:[],   //消息容器
            openEmoji:false,
            openPhoto:false,
            picArr:[
                {
                    id:1,
                    url:require('./../assets/emoji/daxiao@2x.png'),
                    icon:"[大笑]"
                },
                {
                    id:2,
                    url:require('./../assets/emoji/mianwubiaoqing@2x.png'),
                    icon:"[面瘫]"
                },
                {
                    id:3,
                    url:require('./../assets/emoji/ganga@2x.png'),
                    icon:"[尴尬]"
                },
                {
                    id:4,
                    url:require('./../assets/emoji/xiaochulei@2x.png'),
                    icon:"[笑哭]"
                },
                {
                    id:5,
                    url:require('./../assets/emoji/feiwen@2x.png'),
                    icon:"[飞吻]"
                },
                {
                    id:6,
                    url:require('./../assets/emoji/yun-2@2x.png'),
                    icon:"[晕]"
                },   
                {
                    id:7,
                    url:require('./../assets/emoji/bizui@2x.png'),
                    icon:"[闭嘴]"
                },
                {
                    id:8,
                    url:require('./../assets/emoji/ziya@2x.png'),
                    icon:"[呲牙]"
                },
                {
                    id:9,
                    url:require('./../assets/emoji/ku@2x.png'),
                    icon:"[酷]"
                },
                {
                    id:10,
                    url:require('./../assets/emoji/liulei@2x.png'),
                    icon:"[流泪]"
                },
                {
                    id:11,
                    url:require('./../assets/emoji/shuizhuo@2x.png'),
                    icon:"[睡觉]"
                },
                {
                    id:12,
                    url:require('./../assets/emoji/shimo@2x.png'),
                    icon:"[害怕]"
                },
                {
                    id:13,
                    url:require('./../assets/emoji/heng@2x.png'),
                    icon:"[哼]"
                },
                {
                    id:14,
                    url:require('./../assets/emoji/liubixie@2x.png'),
                    icon:"[鼻血]"
                },
                {
                    id:15,
                    url:require('./../assets/emoji/santiaoxian@2x.png'),
                    icon:"[汗]"
                },
                {
                    id:16,
                    url:require('./../assets/emoji/yiwen@2x.png'),
                    icon:"[疑问]"
                },
                {
                    id:17,
                    url:require('./../assets/emoji/xingxingyan@2x.png'),
                    icon:"[星星]"
                },
                {
                    id:18,
                    url:require('./../assets/emoji/tiaopi@2x.png'),
                    icon:"[调皮]"
                },
                {
                    id:19,
                    url:require('./../assets/emoji/biti@2x.png'),
                    icon:"[鼻涕]"
                },
                {
                    id:20,
                    url:require('./../assets/emoji/xinsui@2x.png'),
                    icon:"[心碎]"
                },
                {
                    id:21,
                    url:require('./../assets/emoji/aixin-4@2x.png'),
                    
                    icon:"[爱心]"
                },
                {
                    id:22,
                    url:require('./../assets/emoji/zhadan@2x.png'),
                    icon:"[炸弹]"
                },
                {
                    id:23,
                    url:require('./../assets/emoji/shuai@2x.png'),
                    icon:"[衰]"
                },
            ],          //表情数组
            id:1,
            isChoose1:true,
            isChoose2:false,
            isChoose3:false,
            unfold:true,        //向下展开
            heightRecord:"",    
            aboutMeScroll:"",

            showSysMessage:false,  //显示系统消息
            message :{},    //websocket获得消息
            message1 :"",   //系统消息分割
            message2 :"",   //系统消息分割

            showLogin:false,  //展示登录

            phoneNum:"",//手机号
            sysCode:"", //验证码
            password:"",//密码

            liveInfo:{},//直播详情
            annoInfo:{},//直播信息
            annoXqInfo:{},//直播详情
            annoLcInfo:{},//活动流程
            annoJbInfo:{},//活动嘉宾
            liveList:[],//直播列表

            // videoSource:video,//播放源
            videoSource:window.localStorage.source,//播放源
            streamId:window.localStorage.streamId,
            userId:window.localStorage.Id,
            type:1,//0是回看 1是直播

            isGetedLive: false,

            clickTVBOx:false,
            showedTVBox: true,
            imgIndex: 1,
            swiperOption: {//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,//循环
                loop: true,//设定初始化时slide的索引
                initialSlide: 0,//自动播放
                autoplay: {
                    delay: 1500,
                    stopOnLastSlide: false,/* 触摸滑动后是否继续轮播 */
                    disableOnInteraction: false
                },
                speed: 800,//滑动速度
                direction: "horizontal",//滑动方向
                grabCursor: true,//小手掌抓取滑动
                on: {
                    slideChangeTransitionStart: function() {//滑动之后回调函数
                        that.imgIndex= this.realIndex - 1; /* realIndex为滚动到当前的slide索引值 */
                    },
                },
                pagination: {//分页器设置
                    el: ".swiper-pagination",
                    clickable: true,
                    type: "bullets"
                }
            },
            imgName:"",

            // 滚动部分
            showedTopViedo: false,
            isLogined: false, //是否已登录
            // 是否是原生app环境
            isAppEnv: (typeof window.webkit != 'undefined' && typeof window.webkit.messageHandlers != 'undefined' && typeof window.webkit.messageHandlers.Goshare != 'undefined') || typeof window.JsInterface !='undefined',
            isAndAppEnv: typeof window.JsInterface !='undefined',
            isIosAppEnv: (typeof window.webkit != 'undefined' && typeof window.webkit.messageHandlers != 'undefined' && typeof window.webkit.messageHandlers.Goshare != 'undefined'),
            lastClickVideoTime: 0,
            chatInputIsFocused: false,

            // ws初次加载记录
            wstFirstLoaded: false,

            // 视频是否全屏
            videoIsFullScreen: false,

            // 观看人数
            viewsNumber: '',

            // 横竖屏状态检测
            isCrosswise: false,

            // 侧边悬浮框是否隐藏
            tvboxIsDim: false,

            // 发送短信相关
            sendCodeData: {
                status: 1, // 1初始发送，2正在发送，3重新发送，4发送成功尚未转完cd
                cd: 60
            },

            // 已阅人脸识别操作提示
            haveReadDisernHint: false,

            // 已经开始播放了
            videoIsFirstPlayed: false,

            // 聊天列表
            chatList: [
                {
                    id: 0,
                    nickName: '客服小布',
                    avatar: require("./../assets/avatar.png"),
                    msgType: 2,
                    msg: '欢迎进入直播间!',
                    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567228967120&di=66f584f5df494a59352e448a6df2e8ad&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20131007%2F13639685_123501617185_2.jpg',
                    isSelf: false,
                    isDeleted: false,
                }
            ],

            // 聊天窗口上次是否在底部
            chatBoxLastTimeIsAtBottom: true,

            // 显示播放器控制台
            showedVideoControlBar: false,

            // 正在播放
            videoIsPlaying: false,

            clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        }
    },

    watch: {
        typeMessage(val){
            if(val == 5){
                var oUl = document.getElementById('ul');
                var remove = document.getElementById("#" + this.message.messageId);
                console.log(remove)
                if(remove !=null){
                    oUl.removeChild(remove);
                }
            }
        },
        imgName(val){
            if(val){
                this.wst.send("img::" + val);
                console.log('ws发送图片：' + val);
            }
        },
        onLink(val){
            console.log( val);
            this.linkWebket();
        },
        chatScroll(val){
            var ul = document.getElementById('ul');
            console.log(val,ul.offsetHeight)
        },
        cont(val){
            val=val.replace(/(^\s*)/g, "");
        },
        videoIsFullScreen(val){
            if(val){
            }
        },
        showedDisernHint(val){
            if(val){
                setTimeout(()=>{
                    this.readDisernHint();
                }, 5000);
            }
        }
    },

    computed: {
        fullHeightStyle(){
            return {
                height: this.clientHeight + 'px'
            };
        },

        typeMessage(){
            if(this.message.msgType){
                return this.message.msgType;
            }else{
                return ""
            }
        },

        needHideVideo(){
            return this.showLogin || this.clickTVBOx;
        },

        needFakeFullScreen(){
            return this.isCrosswise || this.videoIsFullScreen;
        },

        needShowDiscernBox(){
            return this.isCrosswise;
        },

        sendCodeText() {
			switch (this.sendCodeData.status) {
			case 1:
				return '获取验证码';
			case 2:
				return '发送中……';
			case 4:
				return '重新获取' + this.sendCodeData.cd + '\'';
			case 3:
				return '重新获取';
			}
        },
        
        // 人脸框位置
        faceBorderStyle (){
            const {disernInfo:{type, disernType, srcImgWidth, srcImgHeight, face:{Rect}}} = this;
            if(type != 2 || disernType!=1){
                return {};
            } else {
                let res = {
                    top: (Rect.Top * 100 / srcImgWidth) + '%',
                    left: (Rect.Left * 100 / srcImgWidth) + '%',
                    width: (Rect.Width * 100 / srcImgWidth) + '%',
                    height: (Rect.height * 100 / srcImgWidth) + '%',
                };
                console.log(res, Rect);
                return res;
            }
        },

        // 物品框位置
        goodBorderStyleArr (){
            const {disernInfo:{type, disernType, srcImgWidth, srcImgHeight, good}} = this;
            if(type!=2 || disernType!=2 || good.length <= 0){
                return [];
            } else {
                return good.map(item => {
                    let res = {
                        top: (item.rect.top * 100 / srcImgWidth) + '%',
                        left: (item.rect.left * 100 / srcImgWidth) + '%',
                        width: (item.rect.width * 100 / srcImgWidth) + '%',
                        height: (item.rect.height * 100 / srcImgWidth) + '%',
                    };
                    console.log(res, item);
                    return res;
                });
            }
        },

        // 是否显示人脸识别截图 
        showedDisernHint(){
            return !this.haveReadDisernHint && this.isCrosswise && this.isLogined && this.videoIsFirstPlayed;
        },

        currDisernGood(){
            const {disernInfo:{type, currGoodIndex, good}} = this;
            if(good.length > 0){
                return good[ currGoodIndex ];
            }
        }
    },

    components: {
        swiper,
        swiperSlide
    },

    created() {
        // 获取了解我信息
        this.knowMe();

        // 获取流信息
        this.getStreamId();

        // 如果已登陆，初始化
        if(window.localStorage.abscess){
            this.initialize();
            this.linkWebket();
            this.isLogined = true;
        }
        // app环境初始化
        this.uriIni();

        // 监听滚动
        window.addEventListener('scroll', () => {
			let t = document.documentElement.scrollTop || document.body.scrollTop;
			if (typeof this.handleWindowScroll == 'function') {
				this.handleWindowScroll(t);
			}
        });

        // 监听屏幕变化
        window.addEventListener('resize', () => {
            this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            console.log('页面大小变化', this.clientHeight);
        });

        // 输入框bug
        setInterval(()=>{
            if(this.chatInputIsFocused){
                this.$refs.chatInputView.scrollIntoViewIfNeeded();
            }

            // 监听播放状态，始终播放
            this.listenPlayStatus();
        }, 1000);

        // 横竖屏状态检测
        this.checkResize();
    },

    mounted() {
    },

    methods: {
        // 监听滚动
        handleWindowScroll(t){
            this.hideTvbox();

			if(t > px2px(420)){
                this.showedTopViedo = true;
            } else {
                this.showedTopViedo = false;
            }
        },

        handleInputFocus(){
            this.openEmoji = false;
            this.openPhoto = false;
            this.chatInputIsFocused = true;
        },

        handleInputBlur(){
            this.openEmoji = false;
            this.openPhoto = false;
            this.hackBlur();
            this.chatInputIsFocused = false;
        },

        // 双击视频模拟事件
        handleClickVideo(){
            let time = new Date().getTime();

            this.needLoginForWatchLive();
            const { lastClickVideoTime } = this;
            if(time - lastClickVideoTime < 800){
                console.log('双击视频');
                this.startDisern();
                this.lastClickVideoTime = 0;
            } else {
                this.lastClickVideoTime = time;

                setTimeout(() => {
                    if(this.lastClickVideoTime != 0){
                        console.log('单击视频');
                        this.cancelDisern();
                    }
                }, 850);
            }
        },

        //获取streamId
        getStreamId(){
            this.$http({
                url:"/api/getLiveH5",
                method:"get",
            }).then((res) => {
                console.log('获取streamId成功:', res.data);
                if(res.data.code == 0 && res.data.info!=null){
                    window.localStorage.streamId = res.data.info.liveStreamId;
                    this.livePassword = res.data.info.livePassword;

                    // this.iniVideoTest();
                    this.getLive();
                } else {
                    // this.iniVideoTest();
                }
            }).catch((error) => {
                console.log('获取streamId失败:', error);
            })
        },
        
        //直播拉流
        getLive(){
            if(this.isGetedLive) return;

            this.$http.post("/api/createPullUrl?streamId=" + window.localStorage.streamId + "&type=" + this.type +"&userId=" + window.localStorage.Id)
            .then((res) => {
                // console.log(res)
                if(res.data.URL){
                    window.localStorage.source = res.data.URL.m3u8;
                    this.videoSource = res.data.URL.m3u8;

                    this.isGetedLive = true;
                }
                this.iniVideo();
            }).catch((error) => {
                this.iniVideo();
                console.log(error)
            });
        },

        iniVideo(){
            var that = this;

            if(true){
                player = new Aliplayer({
                    "id": "player-con",
                    "source": that.videoSource, // "http://haier123test.oss-cn-qingdao.aliyuncs.com/%E5%BC%A0%E4%B8%BB%E5%B8%AD%E5%8D%81%E5%88%86%E9%92%9F%E9%9C%B2%E8%84%B8%E5%8F%8A%E4%B8%8D%E9%9C%B2%E8%84%B8.mp4" || 
                    "width": "100%",
                    "height": "100%",
                    "autoplay": that.autoplay,
                    "isLive": that.playState,
                    // "isLive": false,
                    // "rePlay": false,
                    "playsinline": true,
                    "preload": true,
                    "controlBarVisibility": "hover",
                    "useH5Prism": true,
                    "snapshot":true,
                    "extraInfo":{
                        "crossOrigin":"anonymous",
                        liveRetry:1,
                    },
                    // "encryptType":"1",
                    "cover":banner,

                    // x5_type: 'h5',
                    // x5_fullscreen: false,

                    components: [{
                        name:'fakeFullScreen',
                        type: fakeFullScreenCpt,
                        args:[]
                    }]
                }, function (player) {
                    console.log("The player is created");
                    // that.$refs.video.childNodes[0].setAttribute("crossOrigin","crossOrigin");
                    // player.on('requestFullScreen',that.fullScreen);

                    // player.on('cancelFullScreen', ()=>{
                    //     that.SmallScreen(player);
                    // });

                    player.on('showBar', ()=>{
                        // player.getComponent('fakeFullScreen').$html.style.display = 'block';
                        that.showedVideoControlBar = true;
                    });

                    player.on('hideBar', ()=>{
                        // player.getComponent('fakeFullScreen').$html.style.display = 'none';
                        that.showedVideoControlBar = false;
                    });

                    player.on('ready', ()=>{
                        // that.hijackFullBtnClick();
                        // var fakeFullScreenComponent = player.getComponent('fakeFullScreen');

                        // // 虚拟全屏组件绑定事件
                        // fakeFullScreenComponent.$html.onclick = ()=>{
                        //     that.shiftFullVideo();

                        //     if(that.videoIsFullScreen) {
                        //         fakeFullScreenComponent.$html.classList.add('z-full');
                        //     } else {
                        //         fakeFullScreenComponent.$html.classList.remove('z-full');
                        //     }
                        // }
                    });
                    // player.pause();
                });
            } else {
                player.loadByUrl(that.videoSource);
            }
        },

        // 先切换测试播放
        iniVideoTest(){
            var that = this;
            var player = new Aliplayer({
                "id": "player-con",
                // "source": that.videoSource,
                "source": "http://haier123test.oss-cn-qingdao.aliyuncs.com/%E5%BC%A0%E4%B8%BB%E5%B8%AD%E5%8D%81%E5%88%86%E9%92%9F%E9%9C%B2%E8%84%B8%E5%8F%8A%E4%B8%8D%E9%9C%B2%E8%84%B8.mp4",
                "width": "100%",
                "height": "100%",
                "autoplay": false,
                // "isLive": that.playState,
                "isLive": false,
                // "rePlay": true,
                "playsinline": true,
                "preload": true,
                "controlBarVisibility": "hover",
                "useH5Prism": true,
                "snapshot":true,
                "extraInfo":{
                    "crossOrigin":"anonymous"
                },
                "cover": banner ,//视频播放封面

                // x5_type: 'h5',
                // x5_fullscreen: false,
            }, function (player) {
                // console.log("The player is created");
                that.$refs.video.childNodes[0].setAttribute("crossOrigin","crossOrigin");
                player.on('requestFullScreen',that.fullScreen);
                player.on('cancelFullScreen',that.SmallScreen);
                player.on('showBar', ()=>{
                    // that.hijackFullBtnClick();
                });
            });
        },

        //退出
        logout(){
            if(confirm("确认退出登陆？")) {
                localStorage.removeItem("abscess");
                localStorage.removeItem("user");
                location.reload();
            }
        },

        // 软退出
        softLogout(){
            localStorage.removeItem("abscess");
            localStorage.removeItem("user");
        },
        
        // 全屏监听
        fullScreen(e){
            console.log("我全屏啦");
            // this.videoIsFullScreen = true;
            this.doCheckResize();
            // if(typeof e.preventDefault == 'function'){
            //     e.preventDefault();
            // }


            // var video = document.getElementById("player-con");
            // var face = document.getElementById("identifyInfo");

            // // console.log(video.offsetWidth,video.offsetHeight)
            // video.appendChild(face);
            // face.setAttribute("z-index","2147483647")
            // // this.fullDelete = false;
            // return false;
        },

        SmallScreen(player){
            // alert("我ban屏啦");
            // 小屏后继续播放
            player.play();
            // if(typeof e.preventDefault == 'function'){
            //     e.preventDefault();
            // }
            // this.videoIsFullScreen = false;
            this.doCheckResize();
            // return false;
        },

        // 开始图像识别
        startDisern(){
            if(!window.localStorage.abscess){
                //消息提示
                this.openLogin();
                return message.warning('请登录后进行识别', 1200);
            }
            let { disernInfo } = this;

            if(disernInfo.type == 1){
                return console.log('正在识别……');
            }

            if(typeof player.getStatus=='function'){
                let playerSts = player.getStatus();
                if(playerSts!='playing' && playerSts!='play' && playerSts!='pause' && playerSts!='ready'){
                    return console.log('没有正在播放的视频', playerSts);
                }
            }

            if(!this.isCrosswise){
                return console.log('截图仅支持横屏状态下');
            }

            // 开始截图
            var play = this.$refs.video.childNodes[0];
            var canvas = document.createElement("canvas"); 
            var scale = 0.6; 
            canvas.width = play.offsetWidth * scale; 
            canvas.height = play.offsetHeight * scale; 
            canvas.getContext('2d').drawImage(play, 0, 0, canvas.width, canvas.height); 
            this.screenshot = canvas.toDataURL("image/jpeg", 1);

            var Oimg = this.dataURLToBlob(this.screenshot);
            Oimg.name = new Date().getTime() + ".jpeg";
            // console.log(Oimg)
            if(this.client.put){
                console.log("开始图像识别");
                this.disernInfo.type = 1;

                this.client.put(Oimg.name, Oimg, { 
                    progress: async function (p, checkpoint) {
                        // 断点记录点。 浏览器重启后无法直接继续上传，需用户手动触发进行设置。
                        tempCheckpoint = checkpoint;
                    },
                }).then((res) => {
                    console.log('上传截图成功：', res);

                    if(res.res.status == 200){
                        this.backInfo = res;

                        // 截图对比
                        this.$http.post("http://47.92.204.84:8083/aliyun/compareAliYun?streamId=11&fileName=" + this.backInfo.name + "&time=" + new Date().getTime() + "&type=" + ".jpg", {
                            // data:"streamId=11&fileName=" + this.backInfo.name + "&time=" + new Date().getTime() + "&type=" + ".jpg",
                            // params:"?streamId=11&fileName=123.jpeg",
                        }).then((res) => {
                            console.log('截图对比成功', res.data);
                                    console.log(typeof res.data.good);
                            
                            if(res.data.code == 0){
                                this.disernInfo.srcImgWidth = canvas.width;
                                this.disernInfo.srcImgHeight = canvas.height;
                                console.log(this.disernInfo.srcImgWidth , this.disernInfo.srcImgHeight );

                                if(typeof res.data.face=='object'){ // 人脸
                                    this.disernInfo.type = 2;
                                    this.disernInfo.disernType = 1;

                                    this.disernInfo.face.info = res.data.face.info;
                                    this.disernInfo.face.Rect = res.data.face.Rect;
                                } else if(typeof res.data.good=='object' && res.data.good.length>0) { // 物品
                                    this.disernInfo.type = 2;
                                    this.disernInfo.disernType = 2;

                                    this.disernInfo.currGoodIndex = 0;
                                    this.disernInfo.good = res.data.good.map(item => {
                                        return {
                                            info: item.info,
                                            rect: item.rect,
                                        };
                                    });
                                }else {
                                    this.disernFail();
                                }
                            } else {
                                this.disernFail();
                            }
                        }).catch(err => {
                            console.log('截图对比失败', err);
                            this.disernFail();
                        });
                    } else {
                        this.disernFail();
                    }
                }).catch((err) => {
                    console.error('上传截图出错：', err);
                    this.disernFail();
                });
            } else {
                this.initialize();
            }
        },

        selectDisernGoodIndex(index){
            this.disernInfo.currGoodIndex = index;
            console.log('选择识别物品', index);
        },

        // 图像识别失败处理
        disernFail(){
            if(this.disernInfo.type == 1){
                this.disernInfo.type = 3;

                // 过一会，复位
                setTimeout(()=>{
                    if(this.disernInfo.type == 3){
                        this.disernInfo.type = 0;
                    }
                }, 2500);
            }
        },

        // 取消图像识别
        cancelDisern(){
            console.log("取消图像识别");
            this.disernInfo.type = 0;
        },

        // DataURL转Blob对象
        dataURLToBlob(dataurl){
            var arr = dataurl.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        },

        // DataURL转Blob对象
        linkWebket(){
            var that = this;

            if('WebSocket' in window && window.localStorage.abscess) {
                this.wst = new WebSocket("ws://app.ailive.cloud:8848/ws/" +  window.localStorage.streamId + "/" + window.localStorage.abscess);

                if(!this.wstFirstLoaded){
                    this.wst.onopen = function(){
                        console.log("恭喜你！ws连接成功");
                    }

                    this.wst.onclose = (err) => {
                        console.log("ws意外关闭：onerror", err)               

                        setTimeout(()=>{
                            // this.linkWebket();
                        }, 10000);
                        
                        // if(confirm('连接已断开，确认重连')){
                        // }
                    }
                } else {
                    this.wstFirstLoaded = true;
                }
                
                this.wst.onmessage = function(evt) {
                    let revMsg;
                    try {
                        revMsg = JSON.parse(evt.data);
                    } catch(e) {
                        return console.log('ws消息格式错误', evt.data);
                    }
                    that.message = revMsg;

                    //获取系统消息
                    if(revMsg.system && revMsg.msgType == 3){
                        that.showSysMessage = true;
                        revMsg.message.split(':');
                        that.message1 = revMsg.message.split(':')[0];
                        that.message2 = revMsg.message.split(':')[1].replace("加入房间","").replace(")","");
                        setTimeout(() =>{
                            that.showSysMessage = false;
                        }, 4000);
                    } else {//获取别人消息
                        that.chatBoxLastTimeIsAtBottom = that.$refs.ol.scrollTop >= (that.$refs.ul.offsetHeight + px2px(250) - that.$refs.ol.offsetHeight);

                        if(revMsg.icon == "/img/default_main_pic.png"){
                            revMsg.icon = '';
                        }
                        if(revMsg.msgType == 1 || revMsg.msgType == 2){ // 文字信息
                            that.receiveTextMsg(revMsg.msgType, revMsg.nickName, revMsg.icon, revMsg.message, revMsg.messageId);
                        } else if(revMsg.msgType == 4){ // 图像信息
                            that.receiveImgMsg(revMsg.nickName, revMsg.icon, revMsg.message, revMsg.messageId);
                        } else if (revMsg.msgType == 6){ // 当前观看人数：
                            that.viewsNumber = revMsg.message;
                            console.log('当前观看人数：', that.viewsNumber);    
                        }else if(revMsg.msgType == 5) { // 删除消息
                            that.delChatMsg(revMsg.messageId);
                        } else {
                            return;
                        }
                    }
                }
            }
            else{
                // alert('Not support websocket')
            }
        },
        changeStyle(val){
            if(val == 1){
                this.show = true;
                this.position = '20%';
            }
            if(val == 2){
                this.show = false;
                this.position = '70%';
                this.$nextTick(() => {
                    // this.heightRecord = this.$refs.activ.offsetHeight;
                })
            }
        },
        // 切换登陆
        shiftLogin(){
            if(this.isLogined) {
                this.logout();
            } else {
                this.openLogin();
            }
        },

        openLogin(){
            this.showLogin = true;
            setTimeout(function () {
                document.body.classList.add('on-start');
            }, 100);
            
            setTimeout(function () {
                document.body.classList.add('document-loaded');
            }, 200);
        },
        //获取焦点检查登录状态
        checkLogin(){
            if(!window.localStorage.abscess){
                //消息提示
                // this.$message({
                //         message: '请登录后发言',
                //         type: 'error',
                //     });
                message.error('请登录后发言', 1200);
                this.openLogin();
            }
        },

        //发送文字消息
        send(){
            if(!this.cont){
                return message.error('发送内容不能为空', 1200);
            }

            this.wst.send(this.cont);

            let item = {
                nickName: this.userName,
                avatar: this.message.icon || this.defaultAva,
                msgType: 1,
                msg: '',
                img: '',
                isSelf: true,
                isDeleted: false,
            };

            if(this.message.publisher){
                item.msgType = 3;
            }
            item.msg = this.ReCont(this.cont);
            this.chatList.push(item);

            // 清空文字
            this.cont = "";

            this.$nextTick(() => {
                this.openEmoji = false;
                this.openPhoto = false;
                document.getElementById('inputId').blur();
                this.chatBoxScrollToBottom();
            });
        },

        //发送图片消息
        sendImgMsg(img = ''){
            if(img == ''){
                return message.error('图片为空', 1200);
            }

            let item = {
                nickName: this.userName,
                avatar: this.message.icon || this.defaultAva,
                msgType: 4,
                msg: '',
                img,
                isSelf: true,
                isDeleted: false,
            };

            this.chatList.push(item);

            console.log(item);

            this.$nextTick(() => {
                this.openEmoji = false;
                this.openPhoto = false;
                this.chatBoxScrollToBottom();
            });
        },

        // 收到图片消息
        receiveImgMsg(nickName='', avatar='', img='', id=0){
            if(img == ''){
                return message.error('图片为空', 1200);
            }

            let item = {
                id,
                nickName,
                avatar: avatar || this.defaultAva,
                msgType: 4,
                msg: '',
                img,
                isSelf: false,
                isDeleted: false,
            };

            this.chatList.push(item);

            this.$nextTick(() => {
                this.chatBoxScrollToBottom(false);
            });
        },

        // 收到图片消息
        receiveTextMsg(msgType, nickName='', avatar='', msg='', id=0){
            if(msg == ''){
                return message.error('图片为空', 1200);
            } else {
                msg = this.ReCont(msg);
            }

            let item = {
                id,
                nickName,
                avatar: avatar || (msgType==2 ? this.defaultOfficialAva : this.defaultAva),
                msgType,
                msg,
                img: '',
                isSelf: false,
                isDeleted: false,
            };

            this.chatList.push(item);

            this.$nextTick(() => {
                this.chatBoxScrollToBottom(false);
            });
        },

        // 删除聊天消息
        delChatMsg(id){
            this.chatList.forEach(item => {
                if(item.id == id){
                    item.isDeleted = true;
                }
            });
        },

        //图片与文字拼接
        ReCont(strCont) {
            // console.log(strCont)
            if(strCont == ""){
                return
            }
            for (var i in this.picArr) {        
                var item = this.picArr[i];
                var strimg=" <img src="+item.url+">";
                var reg=new RegExp("\\"+item.icon,"g");
                // alert(reg);
                // console.log(item.url)
                strCont=strCont.replace(reg, strimg);
                //alert(strCont);
            }    
            return strCont;
        },

        unfoldEmoji(){
            this.openEmoji=!this.openEmoji;
            if(this.openEmoji){
                this.openPhoto = false;
            }
        },

        unfoldPhoto(){
            this.openPhoto = !this.openPhoto;
            if(this.openPhoto){
                this.openEmoji = false;
            }
        },
        choose(id){
            // console.log(id)
            var newObj = this.picArr.filter((item) => {
                return item.id == id
            })
            this.cont += newObj[0].icon;
            // document.getElementById('inputId').focus()
        },
        isActive(val){
            if(val == 1){
                this.isChoose1 = true;
                this.isChoose2 = false;
                this.isChoose3 = false;
            }
            if(val == 2){
                this.isChoose2 = true;
                this.isChoose1 = false;
                this.isChoose3 = false;
            }
            if(val == 3){
                this.isChoose3 = true;
                this.isChoose1 = false;
                this.isChoose2 = false;
            }
            this.$nextTick(() => {
                // this.heightRecord = this.$refs.activ.offsetHeight;
            })
        },
        openMore(){
            this.unfold = false;
        },
        closeMore(){
            this.unfold = true;
        },
        aboutMeHeight(){
            // this.aboutMeScroll = this.$refs.adoutMeRef.scrollTop;
            // if(this.heightRecord > 322 && this.aboutMeScroll < 80){
            //     this.unfold = true;
            // }
        },

        // oss图片上传初始化
        initialize(){
            if(!window.localStorage.abscess){
                return
            }
            this.$http.get("/oss/auth/url", {
                // headers: {
                //     "token": window.localStorage.abscess
                // },
            }).then((res) => {
                // console.log(res.data)
                if(res.data.code == 500){
                    this.isLogined = false;
                    this.softLogout();
                    this.openLogin();
                    return message.warning('用户信息已失效，请重新登录', 1200);
                } else {
                    this.client = new OSS({
                        region: 'oss-cn-beijing',
                        //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
                        accessKeyId: res.data.AccessKeyId,
                        accessKeySecret: res.data.AccessKeySecret,
                        stsToken: res.data.SecurityToken,
                        bucket: 'haierzzfb',
                        useFetch: false,
                        secure:true,
                        multiSelection: false,
                    });
                }
                // alert(this.client );
            }).catch((error) => {
                // alert('出错了');
            });
        },

        // 聊天窗口滚动到底部,默认强制执行
        chatBoxScrollToBottom(force = true){
            // console.log('调用滚动到底部', force);
            // console.log('上次是否在底部', this.chatBoxLastTimeIsAtBottom);
            if(this.chatBoxLastTimeIsAtBottom || this.force){
                // console.log('真实执行滚动到底部', force);
                this.$refs.ol.scrollTop = this.$refs.ul.offsetHeight;
            }
        },

        // 开始上传图片
        startUploadImg(){
            var file = document.getElementById("file");
            file.click();
        },
        //http请求
        uploadImg(){
            var that = this;
            let tempCheckpoint;
            var file = document.getElementById("file").files[0];
            var reads = new FileReader();
            reads.readAsDataURL(file);
            reads.onload = function(e) {
                that.sendImgMsg(this.result);
            };

            this.openPhoto = false;
            console.log(file);

            if(this.client.put){
                this.client.put(file.name, file, { 
                    progress: async function (p, checkpoint) {
                        // 断点记录点。 浏览器重启后无法直接继续上传，需用户手动触发进行设置。
                        tempCheckpoint = checkpoint;
                    },
                }).then((res) => {
                    console.log('图片上传成功: ', res);
                    this.imgName = res.url;
                }).catch((err) => {
                    message.error('图片上传失败!');
                    console.error('上传oss出错', err);
                });
            }else{
                this.initialize();
                // this.uploadImg();
            }
        },
        //了解我
        knowMe(){
            this.$http({
                url:"/api/queryDetailByStreamId",
                method:"get",
                params:{
                    streamId:"12",
                    time:new Date().getTime(),
                }
            }).then((res) => {
                // console.log(res)
                if(res.status == 200){
                    this.annoInfo = res.data.annoInfo;
                    this.annoInfo.actTags = res.data.annoInfo.actTags.split(',');
                    
                    this.liveInfo = res.data.liveInfo;
                    this.annoXqInfo = res.data.annoXqInfo;
                    this.annoLcInfo = res.data.annoLcInfo;
                    this.annoJbInfo = res.data.annoJbInfo;
                    this.liveList = res.data.xgtjlist;
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        //相关推荐
        recommend(){
            // var token = window.localStorage.abscess;
            // this.$http({
            //     url:"/api/queryAllLives",
            //     method:"get",
            //     params:{}
            // }).then((res) => {
            //     // console.log(res)
            //     if(res.status == 200){
            //         this.liveList = res.data.lives;
            //     }
            // }).catch((error) => {
            //     console.log(error)
            // })
        },
        //获取验证码
        getCode(){
            if(!this.phoneNum){
                return message.warning('请输入手机号', 1200);
            }

            this.sendCodeData.status = 2;

            this.$http.post("/api/smsCode", {
                'phoneNum' : this.phoneNum
            }).then((res) =>{
                if(res.data.code == 0){;
                    message.success('发送成功,请注意查收', 1200);
                    this.$refs.codeInput.focus();

                    // 发送倒计时
                    const cd = ()=> {
                        setTimeout(()=>  {
                            if (this.sendCodeData.cd <= 0) {
                                this.sendCodeData.status = 3;
                            } else {
                                this.sendCodeData.cd -= 1;
                                cd();
                            }
                        }, 1000);
                    };
                    this.sendCodeData.cd = 59;
                    this.sendCodeData.status = 4;
                    cd();
                }else if(res.data.code == 500){
                    this.sendCodeData.status = 1;
                    this.phoneNum = "";
                    // alert(res.data.msg);
                    message.error('操作失败,请稍后再试！', 1200);
                }
            }).catch(res => {
                this.sendCodeData.status = 1;
                message.error('操作失败,请稍后再试！', 1200);
                // alert(res);
            });
        },
        //登录
        submit(){
            if(!this.phoneNum){
                return message.warning('请输入手机号', 1200);
            }
            if(!this.sysCode){
                return message.warning('请输入验证码', 1200);
            }
            if(!this.password){
                return message.warning('请输入直播密码', 1200);
            }
            if(this.liveType == 2){
                if(!this.livePassword){
                    this.getStreamId();
                    return message.warning('请稍后再试！', 1200);
                }else if(this.livePassword){
                    if(this.livePassword !== this.password){
                        return message.warning('密码输入错误', 1200);
                    }
                }
            }
            this.$http.post("/api/appLoginBySms", {
                'phoneNum' : this.phoneNum,
                'smsCode' : this.sysCode,
            }).then((res) =>{
                if(res.data.code == 0 && res.data.msg == "success"){
                    this.showLogin = false;//关闭登录页
                    window.localStorage.abscess = res.data.token;
                    window.localStorage.user = JSON.stringify(res.data.userEntity);
                    console.log(res.data.userEntity)
                    window.localStorage.Id = res.data.userEntity.userId;
                    this.userName = res.data.userEntity.username;
                    // this.img = res.data.userEntity.img;

                    message.success('欢迎您' + res.data.userEntity.username + "！", 1500);
                    this.$nextTick(() => {
                        this.initialize();
                        this.linkWebket();
                        this.getLive();
                        this.autoplay = true;
                    });

                    // 标记已经登陆
                    this.isLogined = true;

                    // 暂时解决直播问题，重启之
                    location.reload();
                } else {
                    this.sysCode = "";
                    message.error(res.data.msg, 3000);
                    // this.initialize()
                }
            })
        },
        //关闭蒙层
        closeDialog(e){
            this.showLogin = false;
        },
        //播放当前视频
        watchVideo(url){
            // console.log(url)
            this.videoSource = url;
        },

        // 对uri特殊处理下
        specCookUriData(str){
            if(typeof str=='string'){
                return str.replace('#/index', '');
            } else {
                return str;
            }
        },

        // 从uri初始化
        uriIni(){
            if(!this.isAppEnv) return;

            let token = this.specCookUriData(getQueryPara('token')),
                username = this.specCookUriData(getQueryPara('username')),
                userId = this.specCookUriData(getQueryPara('userid')),
                img = this.specCookUriData(getQueryPara('img')),
                mobile = this.specCookUriData(getQueryPara('phone'));
            if(token) {
                window.localStorage.abscess = token;
                window.localStorage.user = JSON.stringify({
                    username,
                    userId,
                    img,
                    mobile,
                });
                window.localStorage.Id = userId;

                this.userName = username;
                // this.img = img;
                this.$nextTick(() => {
                    // this.linkWebket();
                    // this.initialize();
                    // this.getLive();
                });

                // 标记已经登陆
                this.isLogined = true;
            }
        },

        // 必须登陆后才能看直播
        needLoginForWatchLive(){
            if(!window.localStorage.abscess){
                message.warning('请登录后观看直播！', 1200);
                this.openLogin();
                return false;
            } else {
                return true;
            }
        },

        // 分享转发
        toShare(){
            let params = {
                title: '正在发布直播平台',
                content: '海尔920大会演播厅！',
                url: 'http://app.ailive.cloud:9002',
                img: '',
            };
            if(this.isIosAppEnv){
                window.webkit.messageHandlers.Goshare.postMessage(params);
            } else if(this.isAndAppEnv){
                window.JsInterface.Goshare(params.title, params.content, params.url, params.img);
            }
        },

        // 相关推荐
        handleClickRecommend(id, type, shareTitle, shareImgUrl){
            let params = {
                streamId: id,
                type: type,
                shareTitle,
                shareImgUrl,
            };
            if(this.isIosAppEnv){
                window.webkit.messageHandlers.GotoRecommandWithPrams.postMessage(params);
            } else if(this.isAndAppEnv) {
                window.JsInterface.GotoRecommandWithPrams(id, type, shareTitle, shareImgUrl);
            }
        },

        // 这个方法是为了苹果手机失去焦点后，布局无法自动归位
        hackBlur(){
            let doc = document.documentElement || document.body;
            let st = doc.scrollHeight - doc.clientHeight;
            console.log(st);
            window.scrollTo(0, st);
        },
        hackBlurTop(){
            let doc = document.documentElement || document.body;
            let st = doc.scrollHeight - doc.clientHeight;
            console.log(st);
            window.scrollTo(0, st);
        },

        doCheckResize(){
            if (window.orientation === 180 || window.orientation === 0) { 
                console.log('竖屏状态！');
                this.isCrosswise = false;
            } 
            if (window.orientation === 90 || window.orientation === -90 ){ 
                console.log('横屏状态！');
                this.isCrosswise = true;
            } 
        },

        // 检测手机横竖屏状态
        checkResize(){
            let that = this;
            that.doCheckResize();
            
            //判断手机横竖屏状态：
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", ()=>{
                that.doCheckResize();
            }, false); 
        },

        shiftFullVideo(){
            this.videoIsFullScreen = !this.videoIsFullScreen;
        },

        // 劫持全屏按钮点击事件
        hijackFullBtnClick(){
            let eles = document.getElementsByClassName('prism-fullscreen-btn');
            let that = this;
            console.log('满屏按钮个数：', eles.length);
            if(eles.length > 0){
                let ele = eles[0];

                ele.onclick = (e)=>{
                    e.preventDefault();
                    if (e && e.stopPropagation){
                        e.stopPropagation()
                    }else{
                        window.event.cancelBubble = true;
                        window.event.retuenValue = false;
                    }

                    console.log('点击全屏按钮', e);
                    // that.shiftFullVideo();
                    return false;
                };

                ele.ontouchstart = (e)=>{
                    e.preventDefault();
                    if (e && e.stopPropagation){
                        e.stopPropagation()
                    }else{
                        window.evenlt.canceBubble = true;
                        window.event.retuenValue = false;
                    }

                    that.shiftFullVideo();
                    console.log('触摸全屏按钮', e);
                    return false;
                };
            }
        },

        showTvbox(){
            if(this.tvboxIsDim){
                this.tvboxIsDim = false;
            } else {
                this.clickTVBOx = !this.clickTVBOx;
            }
        },
        hideTvbox(){
            this.tvboxIsDim = true;
        },

        // 关闭页面
        closePage(){
            if(this.isIosAppEnv){
                // 必须传一个空参数
                window.webkit.messageHandlers.ClosePage.postMessage({});
            } else if(this.isAndAppEnv){
                window.JsInterface.ClosePage();
            }
        },

        // 监听播放状态，永远播放
        listenPlayStatus(){
            if(player && typeof player.getStatus=='function'){
                let sts = player.getStatus();
                if(typeof sts=='string'){
                    if(sts!='playing' &&  sts!='play' &&  sts!='init' &&  sts!='error'){
                        if(this.isLogined && typeof player.play=='function'){
                            // player.play();
                        }
                    }

                    if(sts=='playing' || sts=='play'){
                        this.videoIsFirstPlayed = true;
                        this.videoIsPlaying = true;
                    } else {
                        this.videoIsPlaying = false;
                    }

                    if(sts == 'error'){
                        if(this.videoIsFullScreen){
                            this.shiftFullVideo();
                        }
                    }
                }
            } else {
                if(this.videoIsFullScreen){
                    this.shiftFullVideo();
                }
            }
        },

        shiftVideoPlay(){
            if(this.videoIsPlaying){
                player.pause();
            } else {
                player.play();
            }
        },

        // 阅读提示
        readDisernHint(){
            this.haveReadDisernHint = true;
        },
    },
}
</script>